<template>
    <div>
        <h1>App</h1>
        <ul>
            <li>
                <!-- http://localhost:8080/#/a/100/user/20?name=jack&age=20#hello -->
                <RouterLink to="/a/100/user/20?name=jack&age=20#hello">Home</RouterLink>
            </li>
            <li>
                <!-- http://localhost:8080/#/a/b/e?name=jack&age=20 -->
                <RouterLink to="/a/b/e?name=jack&age=20">Shop</RouterLink>
            </li>
            <li>
                <!-- http://localhost:8080/#/a/b/f#hello -->
                <RouterLink to="/a/b/f#hello">Cart</RouterLink>
            </li>

            <li>
                <RouterLink to="/a/c/g">ACG</RouterLink>
            </li>
        </ul>

        <hr>

        params:{{ $route.params }}
        <hr>
        query:{{ $route.query }}
        <hr>
        hash: {{ $route.hash }}
        <RouterView></RouterView>
    </div>
</template>
<script>
export default {
    data() {
        return {};
    },
    watch: {
        /*
            侦听this对象上的所有属性
            1. data中定义的
            2. computed中定义的
            3. 属性参数 props
            4. 其他注入的 $route
        */
        $route(a, b) {
            //  地址栏发生变化就会被触发
            console.log(a.params, b.params);
        }
    },
    created() {
        /*
        实时在程序任意位置获取URL（路由对象）
        location: 完整url 对象化
        route: url 中 hash 对象化
        */
        console.log(location);
        // 保存路径参数
        console.log(this.$route.params);
        // 保存路径查询字符串
        console.log(this.$route.query);
    }
}
</script>
<style>
div {
    border: solid;
    padding: 10px;
}
</style>